<template>
  <div class="img-container">
    <div class="img-wrapper">
      <img src="~@/assets/images/500.png" width="400" height="240" alt />
      <div class="error-number">500</div>
      <div class="warning-text mb16">发生错误了~</div>
      <router-link to="/">
        <el-button style="margin-top: 24px">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Page500',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.error-number {
  width: 65px;
  height: 50px;
  font-family: PingFangSC-Semibold;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  margin-top: 24px;
}
.img-container {
  // height: 960px;
  width: 100%;
  height: calc(100vh - 202px);
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 420px;
}
.img-wrapper {
  position: absolute;
  // top: 16%;
  top: calc(50% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.warning-text {
  width: 224px;
  height: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  font-weight: 400;
}
</style>
